<template>
  <div class="index jui-flex jui-flex-column" style="width:100vw;height:100vh;">
    <header>
      <div class="title">
        <img src="/static/imgs/index/logo.png" class="logo">
        <span class="titlefont"></span>
      </div>
    </header>
    <div class="main jui-flex-item">
      <div class="nav" @click="showTownSelector = !showTownSelector">
        <span>切换区域</span><img src="/static/imgs/index/2.png" class="sjx">
      </div>
      <transition :duration="200" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
        <div class="navchild" v-show="showTownSelector">
          <div v-for="(item, index) in towns" :key="index" :class="{on: item.active}" @click="handlerAreaChange(item, index)"><span>{{item.spaceName}}</span></div>
        </div>
      </transition>
      <aside class="asideleft">
        <div class="kuang">
          <div class="smalltitle">
            <span>基本概况</span>
          </div>
          <div class="contentqy textleft" id="gaikuang" style="line-height: 2.7rem;overflow: hidden;text-indent: 2em;">

          </div>
        </div>
        <div class="kuang">
          <div class="smalltitle">
            <span>基础数据</span>
          </div>
          <div class="content2 jui-flex jui-flex-wrap">
            <div class="item"> 人口 <span id="population"></span>人</div>
            <div class="item"> 企业 <span id="company">0</span>家</div>
            <div class="item"> 门店 <span id="store">0</span>家</div>
            <div class="item"> 党组织<span id="dzz">0</span>个</div>
            <div class="item"> 党员 <span id="dys">0</span>人</div>
            <div class="item"> 执法队员 <span id="zfdy">0</span>人</div>
          </div>
        </div>
        <div class="kuang">
          <div class="smalltitle">
            <span>企业税金排名</span>
          </div>
          <div class="contentqy">
            <table border="0" cellspacing="0" cellpadding="0" class="table">
            </table>
          </div>
        </div>
      </aside>
      <aside class="asideright">
        <div class="kuang">
          <div class="smalltitle">
            <span>事件统计</span>
            <!-- 网格 -->
          </div>
          <div class="content" style="padding-left: 15px;">
            <div id="shijian" style="width: 100%;height: 24vh;">

            </div>
          </div>
        </div>
        <div class="kuang">
          <div class="smalltitle">
            <span>案件统计</span>
          </div>
          <div class="choose">
            <select v-model="anjiantongjiYear" @change="loadAnjiantongji">
              <option :value="item" v-for="(item, index) in [2020, 2019, 2018]" :key="index">{{item}}</option>
            </select>
            <div class="sanjiao"></div>
          </div>
          <div class="content" style="padding-left: 15px;">
            <div id="anjian" style="width: 100%;height: 23vh;">

            </div>
          </div>
        </div>
        <div class="kuang">
          <div class="smalltitle">
            <span>办件统计</span>
          </div>
          <div class="content">
            <div class="overhide">
              <div id="pie1" class="pie">

              </div>
              <div id="pie2" class="pie">

              </div>
              <div id="pie3" class="pie">

              </div>
            </div>
            <div class="jui-flex pietext jui-flex-center">
              <div class="jui-flex-item">办结率</div>
              <div class="jui-flex-item">即办率</div>
              <div class="jui-flex-item">满意率</div>
            </div>
          </div>
        </div>
      </aside>
      <div class="middle">
        <div class="total1 total">
          <img src="/static/imgs/index/star.png" class="star star1 ani-shine">
          <img src="/static/imgs/index/star.png" class="star star2 ">
          <div class="num" id="totalCount">0</div>
          <div class="text">累计事件量</div>
          <div class="text2">
            <div class="fl"><span id="todayCount">0</span>今日上报</div>
            <div class="fr"><span id="satisfactionRate">0</span>满意率</div>
          </div>
        </div>
        <div class="total2 total">
          <img src="/static/imgs/index/star.png" class="star star1 ani-shine ani-delay1">
          <img src="/static/imgs/index/star.png" class="star star2 ">
          <div class="num" id="totalCount2">0</div>
          <div class="text">累计案件量</div>
          <div class="text2">
            <div class="fl"><span id="todayCount2">0</span>今日上报</div>
            <div class="fr"><span id="overRate">0</span>办结率</div>
          </div>
        </div>
        <div class="qiu">
          <div class="dizuo">
            <div class="di di1">
              <img src="/static/imgs/index/di1.png" class=" ani-rotate1">
            </div>
            <div class="di di2">
              <img src="/static/imgs/index/di2.png" class="">
            </div>
            <div class="di di3">
              <img src="/static/imgs/index/di3.png" class=" ">
            </div>
            <div class="di di4">
              <img src="/static/imgs/index/di4.png" class=" ani-rotate2">
            </div>
            <div class="di di5">
              <img src="/static/imgs/index/di5.png" class=" ">
            </div>
            <div class="di di6">
              <img src="/static/imgs/index/di6.png" class=" ">
            </div>
            <div class="di di8">
              <img src="/static/imgs/index/di8.png" class=" ani-rotate1">
            </div>
            <div class="di di9">
              <img src="/static/imgs/index/di9.png" class=" ">
            </div>
            <div class="di di10">
              <img src="/static/imgs/index/di10.png" class=" ">
            </div>
          </div>
          <div class="zhu">
            <img src="/static/imgs/index/light1.png" class="light1 light ">
            <img src="/static/imgs/index/light2.png" class="light2 light">
          </div>
        </div>
        <div class="qiu qiu2">
          <div class="dizuo">
            <div class="quan quan1">
              <img src="/static/imgs/index/quan.png" class="ani-circleup ani-delay2">
            </div>
            <div class="quan quan2">
              <img src="/static/imgs/index/quan.png" class="ani-circleup ani-delay1">
            </div>
            <div class="quan quan3">
              <img src="/static/imgs/index/quan.png" class="ani-circleup ">
            </div>
          </div>
          <div class="earth">
            <img src="/static/imgs/index/earth1.png" class="ball">
          </div>
          <div class="circle1 huang">
            <div class="circle ">
            </div>
            <div class="ballbig test1 jump" @click="pageJump($event)">
              审批服务
            </div>
            <div class="ballbig test3 jump" @click="pageJump($event)">
              网格管理
            </div>
          </div>
          <div class="circle2 huang2">
            <div class="circle ">
            </div>
            <div class="ballbig test2 jump" @click="pageJump($event)">
              指挥调度
            </div>
            <div class="ballbig test4 jump" @click="pageJump($event)">综合执法</div>
            <div class="ballsmall ballsmall1 ">
              <img src="/static/imgs/index/starbg.png">
              <div>经济运行</div>
            </div>
            <div class="ballsmall ballsmall2 ">
              <img src="/static/imgs/index/starbg.png">
              <div>自动化办公</div>
            </div>
            <div class="ballsmall ballsmall3 ">
              <img src="/static/imgs/index/starbg.png">
              <div>信用监管</div>
            </div>
          </div>
          <img src="/static/imgs/index/dj.png" class="dj jump" data-name="党建">
        </div>
        <div class="colorful">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  const echarts = require('echarts');
  const $ = require('jquery');
  export default {
    name: 'Index',
    data () {
      var userId2 = this.$db.get("userId") || "98acjf9ecn0h";
      var userId = this.$Util.getQueryString("userId") || userId2;
      var spaceId = this.$db.get('spaceId') || '';
      var currentAreaName = spaceId ? '' : this.$Config.TOWN_NAME;
      this.$db.set("userId", userId);
      this.$db.set("spaceId", spaceId);
      return {
        userCode: 1,
        userId,
        spaceId,
        towns: [],
        currentAreaName: currentAreaName,
        showTownSelector: false,
        anjiantongjiYear: 2020
      };
    },
    methods: {
      handlerAreaChange: function (item, index) {
        var vm = this;
        vm.spaceId = item.spaceId;
        vm.$db.set('spaceId', item.spaceId);
        vm.showTownSelector = false;
        vm.$Util.toggleAttr(vm.towns, index);
        vm.currentAreaName = index ? vm.$Config.TOWN_NAME : item.spaceName;
      },
      pageJump: function (event) {
        var text = event.target.innerText;
        var hrefTo = {
          '审批服务': 'http://121.229.51.64:88/websites/sjfxjc/shouye/index_small.jsp?userId=' + this.userId + '&spaceId=' + this.spaceId,
          '网格管理': '#wgh',
          '指挥调度': '#map',
          '综合执法': 'djzf/zhzfs.html?name=' + this.spaceName,
          '党建': 'djzf/djs.html?name=' + this.spaceName
        };
        window.location.assign(hrefTo[text]);
      },
      loadAnjiantongji: function () {
        var vm = this;
        var urll2 = 'api/getAjtj.jsp?year=' + vm.anjiantongjiYear + '&userId=' + vm.userId + '&spaceId=' + vm.spaceId;
        $.getJSON(urll2, function (data) {
          if (data.code == 0) {
            var data2 = data.data;
            var anjiandata = {
              yearInfo: [],
              countList: []
            };
            data2.forEach(function (obj, i) {
              anjiandata.yearInfo[i] = obj.name;
              if (i < 2) {
                anjiandata.countList[i] = obj.value;
              } else {
                anjiandata.countList[i] = obj.value;
              }
            });
            vm.loadCaseZxInfo("anjian", anjiandata);
          }
        });
      },
      loadCaseZxInfo: function (id, data) {
        var yData = data.countList;
        var xData = data.yearInfo;
        var charts = echarts.init(document.getElementById('anjian'));
        charts.setOption({
          tooltip: {
            trigger: 'item',
            show: true,
            textStyle: {
              fontSize: '18'
            }
          },
          grid: {
            left: '2%',
            right: '2%',
            top: '15%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: xData,
            axisLabel: {
              interval: 0,
              rotate: 0,
              fontSize: 18,
              padding: [3, -15, 0, 0],
              color: '#fff'
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#0BDCFD', // 左边线的颜色
                width: '0.5' // 坐标线的宽度
              }
            },
            textStyle: {
              color: '#0bDEFB', // 坐标值得具体的颜色,
              fontSize: 20
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: false // 隐藏标线
            },
            textStyle: {
              color: '#0BDCFD', // 坐标值得具体的颜色
              width: '0.1' // 坐标线的宽度
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#0BDCFD', // 左边线的颜色
                width: '0.5' // 坐标线的宽度
              }
            },
            axisLabel: {
              fontSize: 18,
              fontWeight: 'bold'
            }
          },
          series: [{
            data: yData,
            name: '案件数量',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#0bDEFB',
                lineStyle: {
                  color: '#0bDEFB'
                },
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: { // 数值样式
                    color: '#0BDEFB',
                    fontSize: 20
                  }
                }
              }
            }
          }]
        });
      }
    },
    mounted: function () {
      var vm = this;
      vm.$http((process.env.NODE_ENV == "production" ? '/' : '') + 'api/yth/homePage/city_area.jsp?userId=' + vm.userId).then(function (res) {
        var data = res.data.data;
        if (data) {
          vm.towns.push({
            active: false,
            spaceId: res.data.thisSpaceId,
            spaceName: res.data.thisSpaceName
          });
          data.forEach(n => {
            n.active = n.spaceId == vm.spaceId;
            n.active && vm.spaceId && (vm.currentAreaName = n.spaceName);
            vm.towns.push(n);
          });
        } else {
          vm.towns.push({
            active: true,
            spaceId: res.data.thisSpaceId,
            spaceName: res.data.thisSpaceName
          });
          vm.userCode = 2;
          vm.spaceId = res.data.thisSpaceId;
          vm.currentAreaName = res.data.thisSpaceName;
        }
      });
    }
  };

</script>

<style lang="scss" scoped>
@import '../assets/css/animate.css';
@import '../assets/css/common.css';
@import '../assets/css/index.css';
</style>
